<template>
    <div>
       <el-card>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getList">
                        <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
                    </el-input> 
                </el-col>
            </el-row> 
        <!-- casestuid casestuname casestuage casestusex  casestusdept casediagnosis casebookdate -->
    <el-table
      :data="list"
      border=""
      style="width: 100%">
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column
        prop="casestuid"
        label="学号">
      </el-table-column>
      <el-table-column
        prop="casestuname"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="casestuage"
        label="年龄"
        width="100">
      </el-table-column>
      <el-table-column
        prop="casestusex"
        label="性别"
        width="100">
      </el-table-column>
      <el-table-column
        prop="casestusdept"
        label="系别"
        width="100">
      </el-table-column>
      <el-table-column
        prop="casediagnosis"
        label="诊断"
        width="180">
      </el-table-column>
      <el-table-column
        prop="casebookdate"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
            label="操作"
            width="280">
            <template  slot-scope="scope">  
            <el-row>
                <!-- <template  slot-scope="scope"> -->
                    <el-button type="primary" @click="dialogVisible1 = true">修改</el-button>
                    <el-button type="danger" @click="removeByID(scope.row.casestuid)">删除</el-button>
                <!-- </template> -->
            </el-row>
            </template>
        </el-table-column>
    </el-table>
       </el-card>
       <!-- 修改对话框 -->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose">
            <!-- casestuid casestuname casestuage casestusex  casestusdept casediagnosis casebookdate -->
            <span>修改信息</span>
            <div>
                <el-form ref="tableData" :model="editForm" label-width="80px" :rules= "rules">
                    <el-form-item label="学号:" style="width: 400px" prop="casestuid">
                        <el-input placeholder="请输入系别" v-model="editForm.casestuid"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:" style="width: 400px" prop="casestuname">
                        <el-input placeholder="请输入系别" v-model="editForm.casestuname"></el-input>
                    </el-form-item>
                    <el-form-item label="性别:" style="width: 400px" prop="casestusex">
                        <el-input placeholder="请输入系别" v-model="editForm.casestusex"></el-input>
                    </el-form-item>
                    <el-form-item label="系别:" style="width: 400px" prop="casestusdept">
                        <el-input placeholder="请输入系别" v-model="editForm.casestusdept"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄:" style="width: 200px" prop="casestuage">
                        <el-input placeholder="请输入年龄" v-model="editForm.casestuage"></el-input>
                    </el-form-item>
                    <el-form-item label="诊断:" style="width: 210px" prop="casediagnosis">
                        <el-input placeholder="请输入诊断详情" v-model.number="editForm.casediagnosis"></el-input>
                    </el-form-item>
                    <el-form-item label="日期" prop= "casebookdate">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期"  style="width: 200px;" v-model="editForm.casebookdate"></el-date-picker>
                        </el-col>
                    </el-form-item>
                </el-form>    
            </div>
            <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible1 = false">取 消</el-button>
                 <el-button type="primary" @click="editCaseBook">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除对话框 --> 
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose">
            <span>确认删除此信息</span>
            <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible2 = false">取 消</el-button>
                 <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除对话框结束 -->
    </div>
</template>

<script>
export default {
    data() {
        return{
            queryInfo: {
                pagenum: '1',
                pagesize: '10000',
                query: '',
            },
            tableData: [{
                date2: '',
                sex2: '',
                no2: '',
                name2: '',
                dept2: '',
                age2: '',
                diagnosis: ''
            }],
            dialogVisible1: false,
            dialogVisible2: false,
            rules: {
                dept2: [
                    {required: true, message: '请输入系别', trigger: 'blur'}
                ],
                age2: [
                    { required: true, message: '年龄不能为空'},
                    { type: 'number', message: '年龄必须为数字值'},
                    { pattern: /^(0|[1-9]\d?|100)$/, message: '范围在0-100',trigger: 'blur'}
                ],
                date2: [
                    {type: 'date', required: true, message: '请输入正确日期', trigger: 'blur'}
                ]
            },
            list: [],
            editForm: {
                casestuid: '',
                casestuname: '',
                casestuage: '',
                casestusex: '',
                casestusdept: '',
                casediagnosis: '',
                casebookdate: '',
            }
        }
    },
    created () {
        this.getList()
    },
   methods: {
       handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },  
        async getList () {
            const { data: res } = await this.$http.get('/system/apis/casebook', { params: this.queryInfo })
            if (res.code !== 20000) return this.$message.error('获取员工列表失败')
            this.list = res.data.value
            this.total = res.data.total
        },
        // <!-- casestuid casestuname casestuage casestusex  casestusdept casediagnosis casebookdate -->
        async editCaseBook () {
             const { data: res } = await this.$http.put('/system/apis/casebook', {
                casestuid: this.editForm.casestuid,
                casestuname: this.editForm.casestuname,
                casestuage: this.editForm.casestuage,
                casestusex: this.editForm.casestusex,
                casestusdept: this.editForm.casestusdept,
                casediagnosis: this.editForm.casediagnosis,
                casebookdate: this.editForm.casebookdate
                })
                if (res.code !== 20000) return this.$message.error('更新用户信息失败!')
                // 关闭对话框
                this.dialogVisible1 = false
                // 刷新数据列表
                this.getList()
                // 爱上的健康
                this.$message.success('更新用户信息成功')
        },
        async removeByID (id)   {
            const confirmResult = await this.$confirm('此操作将永久删除该病历, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
             if (confirmResult !== 'confirm') {
                return this.$message.info('已经取消删除')
            }
            const { data: res } = await this.$http.delete('/system/apis/casebook/' + id)
            if (res.code !== 20000) {
                return this.$message.error('删除用户失败！')
            }
            this.$message.success('删除用户成功！')
            this.getList()
        }
   }
}
</script>